<template>
  <div class="stock-in-auto">
    <div class="a-query">
      <div class="a-query_item">
        <span>订单编号</span>
        <n-input style="width:380px" type="text" placeholder="请输入订单编号" />
      </div>
      <button>重置</button>
    </div>
    <div class="a-list">
      <n-data-table bordered :columns="columns" :data="list" striped :scroll-x="1800" :max-height="'39.5vh'" />
    </div>
    <div class="a-pagination">
      <n-pagination v-model:value="page" :page-count="100" :page-slot="7">
        <template #prev>
          上一页
        </template>
        <template #next>
          下一页
        </template>
        <template #suffix>
          <div class="a-pagination__jump-page">
            到<input type="number">页
            <button>确定</button>
            <span>10 条/页</span>
          </div>
        </template>
      </n-pagination>
    </div>
    <goods-info-drawer>
      <express-info-modal></express-info-modal>
    </goods-info-drawer>
  </div>
</template>

<script setup>
import { h,ref,reactive,provide } from 'vue';
import { useMessage, useDialog } from "naive-ui";
import goodsRow from "../../@fragment/goods-row.vue";
import goodsInfoDrawer from "../../@fragment/goods-info.vue";
import expressInfoModal from "../@fragment/express-info.vue";

let goodsInfoDrawerActive = ref(false);
provide('goodsInfoDrawerActive', goodsInfoDrawerActive);
let expressInfoModalActive = ref(false);
provide('expressInfoModalActive', expressInfoModalActive);

let page = ref(1);
const message = useMessage();
const dialog = useDialog();
const columns = [
  {
    title: '订单编号', key: 'sn'
  },
  { title: '订单总数', key: 'age' },
  { title: '本次订单数量', key: 'address' },
  { title: '商品总价（￥）', key: 'address' },
  { title: '物流信息', key: 'address' },
  {
    title: '操作',
    fixed: 'right',
    width: 350,
    render () {
      return h(goodsRow, {
        stockIn: '一键入库',
        details: '商品详情',
        onHandleStockIn () {
          dialog.info({
            title: "提示",
            content: "确认将商品一键入库？确认后，该商品会自动入库到当前店铺， 如多家店铺请先切换店铺入库。",
            positiveText: "确定",
            onPositiveClick: () => {
              message.success("确定");
            }
          });
        },
        onHandleDetails () {
          goodsInfoDrawerActive.value = true
        }
      })
    }
  }
];
const list = reactive([{
  key: 0,
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park'
}
])
</script>

<style lang="less">
.stock-in-auto {
  display: flex;
  flex-direction: column;
  height: 100%;
  .a-query {
    display: flex;
    align-items: center;
    padding: 0 30px;
    margin-bottom: 28px;
    &_item {
      > span {
        margin-right: 19px;
        font-size: 26px;
        color: #2e323d;
      }
    }
    > button {
      margin-left: 18px;
      width: 114px;
      height: 60px;
      font-size: 26px;
      color: #2e323d;
      background: #f8f8f8;
      border: 1px solid #aaa;
      border-radius: 5px;
    }
  }
  .a-list {
    flex: 1;
    padding: 0 30px;
    /deep/ td {
      vertical-align: middle;
    }
  }
  .a-pagination {
    display: flex;
    align-items: center;
    padding: 0 30px;
    height: 128px;
    box-sizing: border-box;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.2);

    &__jump-page {
      font-size: 26px;
      color: #4a5060;
      margin: 0 18px;

      input {
        margin: 0 15px;
        width: 64px;
        height: 42px;
        text-align: center;
        background: #f8f8f8;
        border: 1px solid #e5e5e5;
        border-radius: 5px;
      }

      button {
        margin: 0 30px;
        width: 88px;
        height: 44px;
        color: #fdfdfd;
        background: #2c8cf0;
        border-radius: 5px;
      }
    }
  }
}
</style>